<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Stkos Visualizer View</title>

<!-- Ext JS -->
<link rel="stylesheet" type="text/css"
	href="../../js/ext/resources/css/ext-all.css" />
<script type="text/javascript"
	src="../../js/ext/adapter/ext/ext-base.js" charset="UTF-8"></script>
<script type="text/javascript" src="../../js/ext/ext-all.js"
	charset="UTF-8"></script>

<!-- D3 -->
<script type="text/javascript" src="../plugin/d3/d3.min.js"
	charset="UTF-8"></script>

<!-- pablo -->
<script type="text/javascript" src="../plugin/pablo/pablo.js"
	charset="UTF-8"></script>

<!-- suspension -->
<script type="text/javascript" src="./js/suspension.js"></script>

<!-- GC -->
<link rel="stylesheet" type="text/css" href="./css/visualizer.html.css" />
<!-- 力导向 -->
<script type="text/javascript" src="./js/d3/D3jsFTree.js"
	charset="UTF-8"></script>
<!-- 左树型 -->
<script type="text/javascript" src="./js/d3/D3jsHTree.js"
	charset="UTF-8"></script>
<!-- 树   型 -->
<script type="text/javascript" src="./js/d3/D3jsVTree.js"
	charset="UTF-8"></script>
<script type="text/javascript" src="./js/visualizer.html.js"
	charset="UTF-8"></script>
<script type="text/javascript">
	var projectId = '', iframeId = '', baseURL = '';
	var drawGraphElId = 'stkosutilVisualizerDrawGraphContainer';
	var choiceGraphTypeElId = 'stkosutilVisualizerChoiceGraphTypeContainer';
	var loadDataConfig = {
		data : null,
		lastLoadDataTime : 0,
		isLoading : false
	};
	var stkosutil_win = null;
	/**
	 * 获取OwlEntity详细信息
	 * @param owlEntity
	 */
	function getOwlEntityInfo(owlEntity) {
		if (owlEntity == null || owlEntity.iri == null) {
			Ext.Msg.show({
				title : '提示',
				msg : '必要信息不完整，无法获取详细信息!',
				buttons : Ext.MessageBox.OK,
				icon : Ext.MessageBox.ERROR
			});
			return;
		}

		Ext.Ajax.request({
			url : baseURL + 'stkosutilowlentitydescriptionservlet',
			method : 'POST',
			params : {
				projectId : projectId,
				entityType : owlEntity.entityType,
				entityIri : owlEntity.iri
			},
			callback : function(options, success, response) {
				if (success) {
					var json = Ext.util.JSON.decode(response.responseText);
					if (json.success) {
						showOwlEntityInfo(json.result);
					} else {
						Ext.Msg.show({
							title : '提示',
							msg : json.msg,
							buttons : Ext.MessageBox.OK,
							icon : Ext.MessageBox.ERROR
						});
					}
				} else {
					Ext.Msg.show({
						title : '提示',
						msg : 'Getting owlEntities tree error! '
								+ response.status + ' ' + response.statusText,
						buttons : Ext.MessageBox.OK,
						icon : Ext.MessageBox.ERROR
					});
				}
			}
		});
	}

	/**
	 * 详细信息展示
	 * @param owlEntity
	 */
	function showOwlEntityInfo(owlEntity) {
		if (owlEntity == null) {
			Ext.Msg.show({
				title : '提示',
				msg : '必要信息不完整，无法显示!',
				buttons : Ext.MessageBox.OK,
				icon : Ext.MessageBox.ERROR
			});
			return;
		}

		var entityType = owlEntity.entityType;
		if (entityType == 'CLASS') {
			entityType = '类';
		} else if (entityType == 'NAMED_INDIVIDUAL') {
			entityType = '实例';
		}
		var displayName = owlEntity.displayName;
		var iri = owlEntity.iri;
		var children = owlEntity.children;
		var propertyValues = owlEntity.propertyValues;

		var annotations = [];
		var properties = [];
		if (propertyValues) {
			for (var i = 0; i < propertyValues.length; i++) {
				var pv = propertyValues[i];
				if (pv.logical) {
					properties.push({
						name : pv.name,
						value : pv.value
					});
				} else {
					annotations.push({
						name : pv.name,
						value : pv.value
					});
				}
			}
		}

		var individuals = [];
		if (children) {
			for (var i = 0; i < children.length; i++) {
				var ch = children[i];
				if ('NAMED_INDIVIDUAL' == ch.entityType) {
					individuals.push(ch.displayName);
				}
			}
		}

		var main_table = 'display: block;width: 100%;height: 100%;overflow: auto;cellspacing: 0px;padding: 5px 5px;border: none;font: 12px Tahoma, Verdana, Arial, Helvetica, sans-serif;background-color:white;';
		var property_table = 'cellspacing: 0px;padding: 0px 0px;border: none;display:block;';
		var category_label = 'color: rgb(71, 121, 190);width: 120px;height: 30px;display: block;line-height: 25px;';
		var property_label = 'font-weight: bold;display: block;height: 20px;line-height:20px;margin-right:25px;';
		var individual_ul = 'border:none;display:block;list-style: none;';
		var individual_ul_li = 'height:25px;line-height:25px;';

		var table = '<table style="' + main_table + '"><tr>' + '<td><div style="'
				+ category_label + '">Display Name:</div></td><td>' + displayName
				+ '</td>' + '</tr><tr><td><div style="' + category_label
				+ '">IRI:</div></td><td>' + iri + '</td></tr><tr>'
				+ '<td valign="top"><div style="' + category_label
				+ '">Annotations:</div></td><td><table style="' + property_table
				+ '">';

		for (var i = 0; i < annotations.length; i++) {
			table += '<tr><td><div style="' + property_label + '">'
					+ annotations[i].name + '</div></td><td>'
					+ annotations[i].value + '</td></tr>';
		}

		table += '</table></td></tr><tr>' + '<td valign="top"><div style="'
				+ category_label + '">Properties:</div></td><td><table style="'
				+ property_table + '">';

		for (var i = 0; i < properties.length; i++) {
			table += '<tr><td><div style="' + property_label + '">'
					+ properties[i].name + '</div></td><td>' + properties[i].value
					+ '</td></tr>';
		}

		table += '</table></td></tr><tr>' + '<td valign="top"><div style="'
				+ category_label + '">Individuals:</div></td><td><ul style="'
				+ individual_ul + '">';

		for (var i = 0; i < individuals.length; i++) {
			table += '<li style="' + individual_ul_li + '">' + individuals[i]
					+ '</li>';
		}

		table += '</ul></td></tr></table>';

		if(stkosutil_win){
			stkosutil_win.destroy();
			stkosutil_win.close();
			stkosutil_win = null;
		}
		stkosutil_win = new Ext.Window({
			title : entityType + '[' + displayName + ']详细信息展示',
			layout : 'fit',
			iconCls : 'stkosutil-details',
			width : 550,
			height : 350,
			minWidth : 360,
			minHeight : 200,
			maximizable : true,
			html : table
		});
		stkosutil_win.show();
	}

	Ext.onReady(function() {
		Ext.QuickTips.init();

		projectId = GetQueryString('projectId');
		iframeId = GetQueryString('iframeId');
		baseURL = GetQueryString('baseURL');

		createDrawGraphEl();
		createChoiceGraphTypeEl();
		drawGraph('vt');
	});
</script>
</head>
<body>
</body>
</html>